<template>
  <el-row :gutter="10">
      <v-form-render
        v-if="hasControls"
          ref="vFormRef"
        >
        </v-form-render>
      <el-input
        v-else
        v-model="valueString"
        :readonly="!isEdit"
        type="textarea"
        size="normal"
        :rows="5"
      ></el-input>
    </el-row>
</template>

<script>
import dynamicCol from "./components/dynamicCol.vue";
import dynamicContainer from "./components/dynamicContainer";

export default {
  components: { dynamicCol, dynamicContainer },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value: {
      handler() {
        //this.load();
      },
      deep: true,
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
  },
  computed:{
    hasControls(){
      return this.controls&& this.controls.widgetList && this.controls.widgetList.length>0
    }
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      loading: false,
      visible: false,
      defaultLabelWidth: "150px",
      isEditForm: false,
      value: {},
      valueString: "",
      controls: [
        {
          span: 12,
          type: "empty",
          field: "field",
          label: "label",
          default: "",
          options: [],
        },
      ],
    };
  },
  methods: {
    bindModel(control) {
      if (!control) control = {};
      if (!this.value[control.field])
        this.$set(this.value, control.field, control.default);
      return this.value;
    },
    setValue(controls, newValue) {
      this.valueString = JSON.stringify(newValue);
      this.$set(this, "value", newValue);
      this.controls = [];
      let _this = this;
      this.controls = controls||{};
      this.$nextTick(() => {
        if(this.$refs.vFormRef)
        {
          this.$refs.vFormRef.setFormJson(controls||{})
          this.$refs.vFormRef.setFormData(newValue||{})
          console.log('isEdit',this.isEdit)
          if(!this.isEdit)
          {
            this.$refs.vFormRef.disableForm()
          }
        }
       
      });
    },
    getValue() {
      if (this.$refs.vFormRef) {
        return this.$refs.vFormRef.getFormData(false);
      }
      else {
        try {
          return JSON.parse(this.valueString);
        } catch (e) {
          return {};
        }
      }
      return {}
    },
  },
};
</script>

<style></style>
